<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
    <meta charset="utf-8">
    <title>书籍展示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


    <link rel="icon" th:href="@{LightYear/favicon-def.ico}" href="LightYear/favicon-def.ico" type="image/ico">
    <link th:href="@{LightYear/css/bootstrap.min.css}" href="LightYear/css/bootstrap.min.css" rel="stylesheet">
    <link th:href="@{LightYear/css/materialdesignicons.min.css}" href="LightYear/css/materialdesignicons.min.css" rel="stylesheet">
    <link th:href="@{LightYear/css/style.min.css}" href="LightYear/css/style.min.css" rel="stylesheet">


    <script type="text/javascript" th:src="@{LightYear/js/jquery.min.js}" src="LightYear/js/jquery.min.js"></script>
    <script type="text/javascript" th:src="@{LightYear/layer/layer.js}" src="LightYear/layer/layer.js"></script>

    <style type="text/css">
        /* 元素位置固定 */
        #position{
            /* position:fixed;
             height:100px;
             width:100px;
             left:525px;
             top:540px;
             background-color:white;*/
            position:fixed;
            top:395px;
        }
    </style>

</head>
<body>
<div class="layuimini-container">
<br>
    <form class="form-inline" role="form" style="float: left;">
        <div class="form-group has-feedback">
            <div class="input-group">
             <!--   <div class="input-group-addon">查询条件</div>-->
                <input id="searchParam" class="form-control has-success" type="text"
                       name ="condition" placeholder="请输入书名或者关键字" value="">
            </div>
        </div>
        <button id="searchBtn" type="button" class="btn btn-cyan" >
            <i class="glyphicon glyphicon-search"></i> 查询
        </button>
        &ensp;
        <button id="resetBtn" type="button" class="btn btn-secondary" >
            <i class="glyphicon glyphicon-reset"></i> 重置
        </button>

        &ensp;
    </form>


    <div style="margin-left: 650px">
        <button class="btn btn-info" onclick="initFileBook()">刷新书库</button>
        &ensp;&ensp;&ensp;
        <button class="btn btn-success" onclick="FileDownloadAll()">批量下载</button>
        &ensp;&ensp;&ensp;
        <button class="btn btn-warning" onclick="help()" >注意事项</button>

    </div>


    <table class="table table-hover">

        <tr>
            <th ><input type="checkbox" id="allCheckBtn"  th：uname="${book.bookName}" >#</th>
            <th>书籍名称</th>
            <th>书籍大小</th>
            <th>创建时间</th>
            <th>书籍路径</th>
            <th>操作</th>
        </tr>
        <tr th:each="book,stat:${list}"><!--循环userList,以person作为形参-->
            <td ><input type="checkbox" th:class="itemCheckBtn" th:text="${stat.count}" th:uid="${book.id}" th:enms="${book.bookName}"></td>
            <td th:text="${book.bookName}"></td>
            <td th:text="${book.bookSize}+KB"></td>
            <td th:text="${book.bookTime}"></td>
            <!-- <td th:text="${teacher.level}">ddd</td>-->

            <td th:text="${book.bookUrl}"></td>
            <td>
                <button class="btn btn-primary" th:name="${book.bookName}" th:id="${book.id}" onclick="down(this)">下载</button>

            </td>
        </tr>

  <!--      <tfoot class="fixed">
        &lt;!&ndash;这是网上搜索的&ndash;&gt;
       <tr>
            <td colspan="6" align="center">
                <ul class="pagination">
                    <li> <a th:href="@{${jumpUrl}}" th:text="首页" th:if="${page.current>1}" th:class="page-item"></a></li>

                    <li> <a th:href="@{${jumpUrl}+${page.current-1}}" th:text="上一页" th:class="page-item"
                            th:if="${page.current>1}"></a></li>
                    <li> <a th:href="@{${jumpUrl}+ ${i}}"
                            th:each="i :${#numbers.sequence(1, page.pages)}" th:text="${i}"
                            th:class="${page.current == i}? 'page-item active' :'page-item' "></a></li>
                    <li><a th:href="@{${jumpUrl}+${page.current+1}}" th:text="下一页" th:class="page-item"
                           th:if="${page.current<page.pages}"></a></li>
                    <li><a
                            th:href="@{${jumpUrl}+${page.pages}}" th:text="尾页" th:class="page-item"
                            th:if="${page.current<page.pages}"></a></li>
                    <li   style="float: left" th:if="${page.pages>0}">
                        <span th:text=" 当前第+${page.current}+页"></span><span
                            th:text="共+${page.pages}+页"></span><span th:text="总共+${page.total}+'条记录'"></span>
                    </li>


                </ul>
            </td>
        </tr>

        </tfoot>-->

    </table>

    <nav>
        <ul class="pagination" id="position">
            <li class="page-item">
                <a class="page-link" href="#!" th:href="@{${jumpUrl}}" th:text="首页" th:if="${page.current>1}" aria-label="Previous">
                    <span aria-hidden="true"><i class="mdi mdi-chevron-left"></i></span>
                </a>
            </li>

            <li class="page-item">
                <a class="page-link" href="#!" th:href="@{${jumpUrl}+${page.current-1}}" th:if="${page.current>1}" aria-label="Previous">
                    <span aria-hidden="true"><i class="mdi mdi-chevron-left"></i></span>
                    <span class="sr-only">上一页</span>
                </a>
            </li>
            <li class="page-item"><a class="page-link" href="#!" th:text=" 第+${page.current}+页">4</a></li>
            <li class="page-item">
                <a class="page-link" href="#!" th:href="@{${jumpUrl}+${page.current+1}}"  th:if="${page.current<page.pages}" aria-label="Next">
                    <span aria-hidden="true"><i class="mdi mdi-chevron-right"></i></span>
                    <span class="sr-only">下一页</span>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link"  th:href="@{${jumpUrl}+${page.pages}}" th:text="尾页"  th:if="${page.current<page.pages}" >
                    <span><i class="mdi mdi-chevron-right"></i></span>
                    <span class="sr-only">尾页</span>
                </a>
            </li>

            <li class="page-item"><a class="page-link" href="#!"  th:text="共+${page.pages}+页"></a></li>
            <li class="page-item"><a class="page-link" href="#!"  th:text="总共+${page.total}+'条记录'"></a></li>
        </ul>
    </nav>

    </div>
</div>
<script th:inline="javascript">


    $("#searchBtn").click(function(){

    var condition =    $("#searchParam").val();
    if(condition==""){
        layer.tips("书名不能为空！","#searchParam",{tips:1});
    }else{
        window.location.href="getPageTxtBook?condition="+condition;
    }


    });


    $("#allCheckBtn").click(function(){
        $(".itemCheckBtn").prop("checked",$(this).prop("checked"))
    });
    $(".itemCheckBtn").click(function(){
        //1、选中了几个？
        $("#allCheckBtn").prop("checked", $(".itemCheckBtn:checked").length == $(".itemCheckBtn").length);
    });

    function down(book){
        var id = $(book).attr("id");
        var  bookName =$(book).attr("name");

   layer.confirm("确定要下载《"+bookName+"》吗？",{icon:3,title:"提示"},function (index) {

            window.location.href="downbook?fileName="+bookName;
            layer.close(index);

        });

    }


    function FileDownloadAll() {

        var eles =$(".itemCheckBtn:checked");
        var enmslist =new Array();
        var ids=new Array();
        eles.each(function () {
            ids.push($(this).attr("uid"))
            enmslist.push($(this).attr("enms"))
        })

       // console.log(ids);
       // console.log(enmslist);

        var stname =enmslist.join(",");

        if(ids==""){
           // layer.msg("请至少选择一本书籍下载！")
            layer.tips("请至少选择一项！","#allCheckBtn");
        }else{
            layer.confirm("确定将《"+stname+"》压缩成zip并下载吗？",{icon:3,title:"提示"},function (index) {
                window.location.href="BatchBookdown?filenmes="+enmslist;
                layer.close(index);
            });
        }

    }

    function initFileBook(){

        layer.msg('刷新书库成功！',{time:1000},function(){
            window.location.href="initFileBook";
       })

    }

    function help(){

     //注意这里取值 script 标签中要带上   th:inline="javascript"
        var bookUrl= [[${bookUrl}]];
       layer.alert("刷新书库前请确保["+bookUrl+"]路径存在,书籍名称不能带有特殊符号！");
    }


    $("#resetBtn").click(function(){
        window.location.href="getPageTxtBook";
    })

</script>


</body>
</html>